<template>
	<div class="tabbar">
		<ul>
			<li
				v-for='(item,index) in routerList'
				:key='index'
				@click='switchTab(item.path)'
			>
				<img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
				<span :class='$route.path.includes(item.path) ? "active" : "" '>{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name: 'Tabbar',
		data(){
			return {
				routerList:[
					{
						title:'首页',
						path:'/home',
						active:'/images/home.png',
						selected:'/images/home-select.png',
					},
					{
						title:'分类',
						path:'/category',
						active:'/images/list.png',
						selected:'/images/list-select.png',
					},
					{
						title:'购物车',
						path:'/car',
						active:'/images/cart.png',
						selected:'/images/cart-select.png',
					},
					{
						title:'我的',
						path:'/myPage',
						active:'/images/my.png',
						selected:'/images/my-select.png',
					}
					
				]
			}
		},
		methods:{
			switchTab( path ){
				//判断是否点击的是同一个路由
				if( this.$route.path == path ) return;
				//对应跳转页面
				this.$router.replace( path );
			}
		}
	}
</script>

<style scoped>
	.tabbar{
		position: fixed;
		left:0;
		bottom:0;
		z-index: 999;
		width: 100%;
		height: 1.6rem;
		background-color: #fff;
	}
	.tabbar ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.tabbar ul li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tabbar ul li img{
		width: 0.826666rem;
		height: 0.826666rem;
	}
	.tabbar ul li span{
		font-size:0.426666rem;
	}
	.active{
		color:red;
	}
</style>
